<template>
	<view class="card_">
		<view class="u-flex u-flex-1 u-flex-between u-m-b-20">
			<view class="sub-title-two">
				<text>订单编号：</text>
				{{orderDetail.order.orderNo}}
			</view>
			<orderStatus :status="orderDetail.order.status" />
		</view>
		<view class="f-s-14">
			<view>
				<text class="sub-title-two ">客户姓名：</text>
				<text class="f-s-14">{{orderDetail.user.nickName}}</text>
			</view>
			<view>
				<text class="sub-title-two ">手机号：</text>
				{{starPhone(orderDetail.user.phonenumber)}}
			</view>
			<view class=" u-flex u-flex-1">
				<text class="sub-title-two u-line-1">订单名称：</text>
				<view>{{orderDetail.order.title}}</view>
			</view>
			<view class="u-flex u-flex-items-center">
				<text class="sub-title-two ">商品总价：</text>
				<price :price="orderDetail.order.money" :size="16" />
			</view>
			<view class="u-flex u-flex-items-center">
				<text class="sub-title-two ">实付金额：</text>
				<price :price="orderDetail.order.payMoney" :size="16" />
			</view>
		</view>
		<u-divider></u-divider>
		<block v-if="orderDetail.order.status=='Paid'">
			<view class="sub-title-two">支付时间：{{orderDetail.order.payAt}}</view>
		</block>
		<view v-else class="sub-title-two">下单时间：{{orderDetail.order.createAt}}</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref
	} from 'vue';
	import {
		starPhone
	} from '@/utils/common.js'
	import Price from '@/components/common/price.vue'
	import orderStatus from '@/components/order/order_status.vue'
	const props = defineProps({
		orderDetail: Object
	})
</script>

<style lang="scss" scoped>
	.card_ {
		background-color: #fff;
		padding: 20px 12px;
		border-radius: 8px;

	}
</style>